<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>商城首页</title>
	<link href="${pageContext.servletContext.contextPath }/image/icon.jpg" rel="icon">
	<link href="${pageContext.servletContext.contextPath }/css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="${pageContext.servletContext.contextPath }/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.servletContext.contextPath }/js/bootstrap.js"></script>
</head>
<body>
   <div class="container">
      <!-- Example row of columns -->
      <div class="row" style="margin-top: 30px;margin-left: 20px"><!-- 品牌项 -->
      	<span style="margin-right: 10px"><b>品牌: </b></span>
        <c:forEach items="${allBrand}" var="brand">
        	<input type="checkbox" value="${brand}" name="brand" style="margin-left: 15px">${brand} 
        </c:forEach>
     </div>
     <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 网络类型项 -->
     	<span style="margin-right: 10px"><b>网络类型: </b></span>
        <c:forEach items="${allNetwork}" var="network">
        	<input type="checkbox" value="${network}" name="network" style="margin-left: 15px">${network}
        </c:forEach>
     </div>
     <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 尺寸大小项 -->
     	<span style="margin-right: 10px"><b>尺寸: </b></span>
        <c:forEach items="${allSize}" var="size">
        	<input type="checkbox" value="${size}" name="size" style="margin-left: 15px">${size}
        </c:forEach>
     </div>
     <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 内存大小项 -->
     	<span style="margin-right: 10px"><b>内存大小: </b></span>
        <c:forEach items="${allRom}" var="rom">
        	<input type="checkbox" value="${rom}" name="rom" style="margin-left: 15px">${rom}
        </c:forEach>
     </div>
     <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 排序规则 -->
     	<span style="margin-right: 10px"><b>排序规则: </b></span>
     	<input type="radio" value="p_count~desc" name="rule" style="margin-left: 15px" checked="checked">销量降序
     	<input type="radio" value="p_count~asc" name="rule" style="margin-left: 15px" >销量升序
     	<input type="radio" value="p_good~desc" name="rule" style="margin-left: 15px" >好评降序
     	<input type="radio" value="p_good~asc" name="rule" style="margin-left: 15px" >好评升序
     </div>
     <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 价格区间 -->
     	<span style="margin-right: 10px"><b>价格区间: </b></span>
     	<select id="price">
     		<option value="0001~6500">0001~6500</option>
     		<option value="0001~3000">0001~3000</option>
     		<option value="3001~5000">3001~5000</option>
     		<option value="5001~6500">5001~6500</option>
     	</select>
     	<span>元</span>
     </div>
      <div class="row" style="margin-top: 20px;margin-left: 20px"><!-- 确定按钮 -->
      	<!-- <input type="button" value="确定" class="btn btn-primary" onclick="select()"> -->
      	<button class="btn btn-primary" onclick="select()">确定</button>
      </div>
     
      <div style="padding-top: 2%">
      	<table class="table table-hover">
        	<thead>
	      		<tr>
	         		<th>品牌</th>
	         		<th>型号</th>
	         		<th>价格</th>
	         		<th>尺寸</th>
	        		<th>网络类型</th>
	        		<th>操作系统</th>
	        		<th>内存</th>
	        		<th>分辨率</th>
	        		<th>销量</th>
	        		<th>好评数</th>
	        		<th>上架时间</th>
	      		</tr>
	   		</thead>
	    	<tbody id="productView">
		   		<c:choose>
		   			<c:when test="${allProduct==null}">
		   				<tr>
							<td colspan="11"align="center">目前数据库中没有商品信息,待添加!</td>
						</tr>
		   			</c:when>
		   			<c:when test="${allProduct!=null}">
		   				<c:forEach items="${allProduct}" var="product">
							<tr>
								<td>${product.pbrand}</td>
								<td>${product.pname}</td>
								<td>${product.pprice}</td>
								<td>${product.psize}</td>
								<td>${product.pnetwork}</td>
								<td>${product.pos}</td>
								<td>${product.prom}</td>
								<td>${product.presolution}</td>
								<td>${product.pcount}</td>
								<td>${product.pgood}</td>
								<td>${product.pcreattime}</td>
							</tr>
						</c:forEach>	      	
		   			</c:when>
		   		</c:choose>
		   </tbody>
      </table>
      </div>
      <div class = "row"><!-- 页面切换按钮组 -->
	    		<button id="frontPage" class='btn btn-primary btn-sm' style="margin-right: 6px;margin-left: 15px" onclick="changePage(this)" value="front">上一页</button>
	    		<input id="firstButton" class='btn btn-primary btn-sm' onclick="changePage(this)" value="首页" type="button">
	    		当前第<span id="curPage" style="color: blue">${curPage }</span>页
	    		<input id="endButton" class='btn btn-primary btn-sm' onclick="changePage(this)" value="尾页" type="button"> 	    		
	    		<button id="nextPage" class='btn btn-primary btn-sm' style="margin-left: 6px;margin-right: 15px" onclick="changePage(this)" value="next">下一页</button>
	    		 <span style="margin-left: 15px">跳转到</span>
				<input id="pointText" type="text" style="width: 40px" onkeyup="checkNum(this)" value="1">页
				<input id="pointButton" type="button" style="margin-right: 15px" class='btn btn-primary btn-sm' onclick="changePage(this)" value="确定">
				总共<span id="totalPage" style="color: blue"><b>${totalPage }</b></span>页
	    	</div>
      
      <hr>	<!-- 添加分割线换行 -->
      <footer>
        <p style="color: blue">&copy; author: Link</p>
      </footer>
    </div> <!-- /container -->
	<script type="text/javascript">
		function changePage(){//分页页0面切换方法体
			var buttonObj = arguments[0];
			var curPage = parseInt($("#curPage").text());//当前页面
			var totalPage = parseInt($("#totalPage").text());//总共页面
			if(buttonObj.value === "front"){//上一页
				if(curPage>1){
					curPage = curPage-1;
				}
			}else if(buttonObj.value === "next"){//下一页
				if(curPage<totalPage){
					curPage = curPage+1;
				}
			}else if(buttonObj.value === "首页"){
				curPage =1;
			}else if(buttonObj.value === "尾页"){
				curPage =totalPage;
			}else if(buttonObj.value === "确定"){//跳转到指定页面
				curPage = parseInt($("#pointText").val());
			}
			var price = $("#price").val();//获取选择价格区间
			var priceArray = new Array();
			priceArray = price.split("~");
			var lowPrice = priceArray[0];//最低价格
			var highPrice = priceArray[1];//最高价格
			
			var rule = $("input[name='rule']:checked").val();//获取排序规则
			var ruleArray = new Array();
			ruleArray = rule.split("~");
			var order = {'field':ruleArray[0],'rule':ruleArray[1]};//申明javascript数组来存放Order对象
			var orders = new Array();
			orders.push(order);
			
			var begin = (curPage-1)*5;//起始位置
			var rows = 5;//每次查询条数
			
			var brands = new Array();//获取所选品牌
			$("input[name='brand']:checked").each(function(i,n){//遍历所有的品牌选择
				brands.push(n.value);
			});
			var sizes = new Array();//获取所选尺寸
			$("input[name='size']:checked").each(function(i,n){//遍历所有的品牌选择
				sizes.push(n.value);
			});
			var networks = new Array();//获取所选网络类型
			$("input[name='network']:checked").each(function(i,n){//遍历所有的品牌选择
				networks.push(n.value);
			});
			var roms = new Array();//获取所选网络类型
			$("input[name='rom']:checked").each(function(i,n){//遍历所有的品牌选择
				roms.push(n.value);
			});
			var selectObj = {'brands':brands,'sizes':sizes,'networks':networks,'roms':roms,'orders':orders,'lowPrice':lowPrice,'highPrice':highPrice,'begin':begin,'rows':rows};//定义javascript集合
			var selectJson = JSON.stringify(selectObj);
			if(curPage!=parseInt($("#curPage").text())){
				$.ajax({
					url:"${pageContext.servletContext.contextPath}/pageChange",
					type:"post",
					contentType: 'application/json',//配置json的转换类型
					data:selectJson,
					success:function(data){
						var productObj = JSON.parse(data);
						$("#curPage").text(curPage);//设置当前页面
						var totalPage = 0;
						if(productObj.length != 0){
							totalPage = productObj[0].totalPage;
						}
						$("#totalPage").text(totalPage);
						$("#productView").empty();//清空
						for(var i = 0; i<productObj.length;i++){
							var trObj = $("<tr></tr>");
							var tdBrandObj = $("<td>"+productObj[i].pbrand+"</td>");
							trObj.append(tdBrandObj);
							var tdNameObj = $("<td>"+productObj[i].pname+"</td>");
							trObj.append(tdNameObj);
							var tdPriceObj = $("<td>"+productObj[i].pprice+"</td>");
							trObj.append(tdPriceObj);
							var tdSizeObj = $("<td>"+productObj[i].psize+"</td>");
							trObj.append(tdSizeObj);
							var tdNetworkObj = $("<td>"+productObj[i].pnetwork+"</td>");
							trObj.append(tdNetworkObj);
							var tdOsObj = $("<td>"+productObj[i].pos+"</td>");
							trObj.append(tdOsObj);
							var tdRomObj = $("<td>"+productObj[i].prom+"</td>");
							trObj.append(tdRomObj);
							var tdResolutionObj = $("<td>"+productObj[i].presolution+"</td>");
							trObj.append(tdResolutionObj);
							var tdCountObj = $("<td>"+productObj[i].pcount+"</td>");
							trObj.append(tdCountObj);
							var tdGoodObj = $("<td>"+productObj[i].pgood+"</td>");
							trObj.append(tdGoodObj);
							var tdCreattimeObj = $("<td>"+productObj[i].pcreattime+"</td>");
							trObj.append(tdCreattimeObj);
							$("#productView").append(trObj);
						}
					}
				});
			}
		}	
		function select(){//按照选择条件进行筛选
			var price = $("#price").val();//获取选择价格区间
			var priceArray = new Array();
			priceArray = price.split("~");
			var lowPrice = priceArray[0];//最低价格
			var highPrice = priceArray[1];//最高价格
			
			var rule = $("input[name='rule']:checked").val();//获取排序规则
			var ruleArray = new Array();
			ruleArray = rule.split("~");
			var order = {'field':ruleArray[0],'rule':ruleArray[1]};//申明javascript数组来存放Order对象
			var orders = new Array();
			orders.push(order);
			
			var begin = 0;//起始位置
			var rows = 5;//每次查询条数
			
			var brands = new Array();//获取所选品牌
			$("input[name='brand']:checked").each(function(i,n){//遍历所有的品牌选择
				brands.push(n.value);
			});
			var sizes = new Array();//获取所选尺寸
			$("input[name='size']:checked").each(function(i,n){//遍历所有的品牌选择
				sizes.push(n.value);
			});
			var networks = new Array();//获取所选网络类型
			$("input[name='network']:checked").each(function(i,n){//遍历所有的品牌选择
				networks.push(n.value);
			});
			var roms = new Array();//获取所选网络类型
			$("input[name='rom']:checked").each(function(i,n){//遍历所有的品牌选择
				roms.push(n.value);
			});
			var selectObj = {'brands':brands,'sizes':sizes,'networks':networks,'roms':roms,'orders':orders,'lowPrice':lowPrice,'highPrice':highPrice,'begin':begin,'rows':rows};//定义javascript集合
			var selectJson = JSON.stringify(selectObj);
			$.ajax({
				url:'${pageContext.servletContext.contextPath}/pageChange',
				type:'post',
				contentType:'application/json',
				data:selectJson,
				success:function(data){
					var productObj = JSON.parse(data);
					$("#curPage").text(1);//设置当前页面
					var totalPage = 0;
					if(productObj.length != 0){
						totalPage = productObj[0].totalPage;
					}	
					$("#totalPage").text(totalPage);
					$("#productView").empty();//清空
					for(var i = 0; i<productObj.length;i++){
						var trObj = $("<tr></tr>");
						var tdBrandObj = $("<td>"+productObj[i].pbrand+"</td>");
						trObj.append(tdBrandObj);
						var tdNameObj = $("<td>"+productObj[i].pname+"</td>");
						trObj.append(tdNameObj);
						var tdPriceObj = $("<td>"+productObj[i].pprice+"</td>");
						trObj.append(tdPriceObj);
						var tdSizeObj = $("<td>"+productObj[i].psize+"</td>");
						trObj.append(tdSizeObj);
						var tdNetworkObj = $("<td>"+productObj[i].pnetwork+"</td>");
						trObj.append(tdNetworkObj);
						var tdOsObj = $("<td>"+productObj[i].pos+"</td>");
						trObj.append(tdOsObj);
						var tdRomObj = $("<td>"+productObj[i].prom+"</td>");
						trObj.append(tdRomObj);
						var tdResolutionObj = $("<td>"+productObj[i].presolution+"</td>");
						trObj.append(tdResolutionObj);
						var tdCountObj = $("<td>"+productObj[i].pcount+"</td>");
						trObj.append(tdCountObj);
						var tdGoodObj = $("<td>"+productObj[i].pgood+"</td>");
						trObj.append(tdGoodObj);
						var tdCreattimeObj = $("<td>"+productObj[i].pcreattime+"</td>");
						trObj.append(tdCreattimeObj);
						$("#productView").append(trObj);
					}
				}
			});	
		}
	</script>

</body>
</html>